/* Zorg dat de website zich aanpast aan verschillende schermgroottes */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #00008B;
    color: white;
    padding: 1px 0;
    text-align: center;
}

section {
    padding: 20px;
    margin: 10px;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #00008B;
    color: white;
}

h1, h2 {
    margin: 0;
}

/* Responsieve aanpassingen */
@media screen and (max-width: 600px) {
    header {
        font-size: 18px;
    }

    section {
        font-size: 14px;
    }

    footer {
        font-size: 12px;
    }
}

/*hyperlinks geen kleurverandering*/
a.no-color-change,
a.no-color-change:visited,
a.no-color-change:hover,
a.no-color-change:active,
a.no-color-change:focus {
  color: white;
  text-decoration: none;
}

/* Navigatiebalk en logo */
        .navbar {
			background-color: #00008B;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
			z-index: 2200;
    		position: relative; /* 👈 DEZE IS BELANGRIJK */			
        }
		
		.navbar a	{
            text-decoration: none;
            color: white;
		}


        /* Menu-knop (hamburger) */
        .menu-btn, .login-icon {
            display: none;
            font-size: 24px;
            cursor: pointer;
        }

        .menu a {
            text-decoration: none;
  			font-weight: bold;
			color: white;
            padding: 10px 15px;
            border-radius: 5px;
            transition: background 0.3s ease;
        }

        .menu a:hover {

            background-color: rgba(255, 255, 255, 0.2);
		
        }

		/* Stijl specifiek voor poeltje-links */
		.menu a.poeltje-link {
  			font-weight: bold;
 			color: #0044cc;
  			border-left: 4px solid #0044cc;
  			background-color: #f0f6ff;
  			margin-bottom: 5px;
  			border-radius: 6px;
		}

/* Hover effect */
		.menu a.poeltje-link:hover {
  			background-color: #dbe8ff;
  			color: #002a80;
		}


        /* Responsief ontwerp: menu verbergen op mobiel */
        @media (max-width: 768px) {
            .menu {
                display: none; /* Verberg menu standaard */
                flex-direction: column;
                position: absolute;
                top: 60px;
                left: 0;
                width: 100%;
				background-color: #00008B;
				z-index: 2000;
                /*background-color: #007bff;*/
                text-align: center;
                padding: 10px 0;
            }

            .menu a {
                display: block;
                padding: 12px;
            }

            .menu-btn {
                display: block; /* Toon de hamburgerknop op mobiel */
				margin-right: 1rem; /* meer ruimte rechts */
            }

            .menu.active {
                display: flex; /* Toon menu als 'active' klasse is toegevoegd */
            }
        }

/*
.logo a {
            text-decoration: none;
			font-size: 24px;
    		font-weight: bold;
    		color: #ffffff;
    		letter-spacing: 1px;
			margin-left: 1rem; /* meer ruimte rechts */

}
*/
.logo {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 1px;
}



/*login-icoon*/
.login-icon {
  background-color: #00008B;
  color: white;
  padding: 10px;
  border-radius: 50%; /* maakt 'm rond */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

.login-icon:hover {
  background-color: #c64415;
  transform: scale(1.1);
}

.login-icon i {
  font-size: 20px;
}

/*Loginstijl*/
.login-container {
            background: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            width: 300px;
            text-align: center;
        }
        input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            /*background: #28a745;*/
			/*background: #007c91; /*tealblauw*/
			/*background: #007c91; /*petrol*/
            background: #003366; /*donkerblauw mooi*/
			color: white;
            border: none;
            padding: 10px;
            width: 100%;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background: #218838;
			
        }


/* Responsieve afbeelding */
        .responsive-img {
            max-width: 90%; /* Past de breedte aan het scherm aan */
            height: auto; /* Zorgt ervoor dat de hoogte proportioneel blijft */
            display: block;
            margin: 0 auto; /* Centreert de afbeelding */
        }


/*responsieve table */
.table-container {
  overflow-x: auto;
  width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;	
  }

th, td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
	
}

@media (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
	border: none;
  }
  th, td {
    border: none; /* Verberg de randen van de cellen */
  }	
}

.poule-table {
  table-layout: fixed;
  width: 100%;
}

.poule-table th,
.poule-table td {
  width: 33.33%; /* bijvoorbeeld: 3 kolommen */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




/*responsieve tekstpagina */
.container {
            max-width: 800px;
            margin: auto;
            background: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
@media (max-width: 600px) {
            .container {
                padding: 10px;
            }
            p {
                font-size: 16px;
            }
        }

/*cards table*/
.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.card {
    background: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 100%;
}

@media (min-width: 600px) {
    .card {
        width: 45%;
    }
}

@media (min-width: 900px) {
    .card {
        width: 30%;
    }
}

/*specifieke stijlen*/
.status {
	font-size: 11px; 
	color: #FFFFFF; 
	background-color: #00008B;
	text-align:center; 
	/*font-style: italic;*/
}

.input.geel {
  background-color: #fff9c4;
  color: #333;
  padding: 12px;
  border-left: 5px solid #ffeb3b;
  border-radius: 4px;
}

.blauw {
  background: #00008B;
  color: #FFFFFF;
  padding: 12px;
  border-left: 5px solid #ffeb3b;
  border-radius: 4px;
}



.blauwfontgroot {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #00008B;
    text-align:center;
	font-weight: bold;
}

.blauwfont {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #00008B;
    text-align:center;
	font-weight: bold;
}

.blauwfontstart {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #00008B;
    text-align:center;
	font-weight: bold;
}

.roodfont {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: red;
    /*text-align:center;*/
	font-weight: bold;
}

.witfont {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
    text-align:center;
	font-weight: bold;
}

.team-gele-accent {
    background-color: #fff9c4; /* zacht geel */
    border: 2px solid gold;
    font-weight: bold;
    color: #333;
}

.btn-orange {
    background-color: #FFA500;
    color: white;
    border: none;
}

.btn-orange:hover {
    background-color: #e69500;
    color: white;
}

.menu a.poeltje-link.mijn-poeltje {
    background-color: #1f4fd8;
    color: #ffffff;
    border-left: 4px solid #1f4fd8;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: bold;
}

.menu a.poeltje-link.mijn-poeltje:hover {
    background-color: #163bb0;
    border-left-color: #163bb0;
    color: #ffffff;
}

/* standaard verbergen */
.desktop-warning {
    display: none;
    background: #003366;
    color: #ff0000;
    padding: 14px;
    text-align: center;
    font-weight: 700;
    letter-spacing: .3px;
}

@media (min-width: 900px) {
    .desktop-warning {
        display: block;
    }
}

/* Prikbord badge */
.icon-wrapper {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    color: white;
}

.icon-wrapper i {
    font-size: 20px;
}

.icon-wrapper .badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: red;
    color: white;
    font-size: 11px;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
}